.scrollToTabContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  user-select: none;
  overflow: hidden;

  .tabListContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    background-color: beige;
    z-index: 999;
    .tabListAndBarContainer {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      .tabListItemUnderBar {
        position: absolute;
        height: 3px;
        bottom: 3px;
        border-radius: 10px;
        background-color: cornflowerblue;
      }
      .tabListItem {
        padding: 5px;
        color: gray;
        font-weight: 700;
        &:hover {
          color: black;
        }
      }
      .boldFrontSize {
        color: black;
      }
    }
  }
  .componentListContainer {
    width: 100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    // overflow-x: hidden;
    position: relative;
    .componentListItem {
      overflow-y: hidden;
      width: 100%;
      height: 100%;
      flex-shrink: 0;
    }
    .overFlowScroll {
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .leftImg,
    .rightImg {
      height: 180%;
      width: 220px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
      background-color: rgb(243, 205, 205);
      border-radius: 50%;
      opacity: 0;
    }
    .leftImg {
      left: -200px;
    }
    .rightImg {
      right: -200px;
    }
  }
}
